<template>
  <div>
    <!-- 个人中心基本信息 -->
    <div class="c-p" v-if="baseConf.styleType ==1">
      <div class="bgSize-cover" :style="{backgroundImage: `url(${baseConf.backgroundImage || 'https://kposshzcdn.ckjr001.com/admin/material/14_material_admin/image/assets/app/userInfo-bg.png'})`}" :class="isShowMember ? 'hh322' : 'c-hh206'">
        <div class="c-p c-p-l0 c-p-t0" :class="isShowMember ? 'templateTwoImg' : ''">
          <div class="c-flex-row c-ph30 c-pt44 c-pb40">
            <div class="c-ww124 c-hh124 c-brp50 bd-ed" @click="clickAvatar">
              <img class="c-ww120 c-hh120 c-brp50" :src='userHeadImg ? userHeadImg : require("@/assets/defult_head.png")' />
            </div>
            <div class="c-pl20 c-pt8 c-w0 c-flex-grow1">
              <div class="c-flex-row c-justify-sb c-aligni-center">
                <div class="c-fw-b c-fs28 c-ww280 c-text-ellipsis1" :style="{color: baseConf.colorSet}">{{userName}}</div>
                <div class="iconfont c-fs36 c-fc-white" @click="clickSign" v-if="showSignIn">&#xe8d5;</div>
                <div class="c-p c-ww100 c-hh40 c-fc-white c-bg-black c-br20" v-if="isiOS || isAnApp">
                  <div class="c-w100 c-h c-opacity50 c-bd1-white c-br20"></div>
                  <div @click="iosLogoOut" class="c-flex-row c-flex-center c-h c-pa c-p-t0 c-p-l0 c-w100">退出</div>
                </div>
              </div>
              <div class="c-flex-row c-pt24 c-aligni-center">
                <identity-com v-if="!$isWxAppIos()" :vipType="vipTypeNum"></identity-com>
                <div class="c-pl6 c-fs24 c-fc-sblack c-ws-n c-pt4" :class="!$isWxAppIos() ? 'c-pl20' : ''" :style="{color: baseConf.colorSet}" v-if="!isiOS || (isiOS && !isYouke) || !isAnApp">
                  <span>ID:{{memberInfo.showId}}</span>
                  <span @click="copyId" class="iconfont c-fs32 c-pl10 c-vcAlign-top">&#xe805;</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-pa p-b46 p-l160 c-flex-row c-aligni-center c-justify-sb fc-brown c-pr24 c-w70" @click="clickCenter(vipTypeNum)" v-if="isShowMember && !$isWxAppIos()">
        <div class="c-fs26 c-fw-b">{{vipTypeNum ==1 ? baseConf.guidMessage : vipTypeNum == 2 ? '专属VIP会员' :  vipTypeNum == 4 ? '专属SVIP会员' : '已有会员权限'}}</div>
        <div class="c-fs22 c-ws-n c-flex-row c-aligni-center">{{vipTypeNum ==1 ? '' : vipTypeNum==2 ? (vipEndTime.split('-')[0] >= '9900' ? '长期有效' : (vipEndTime + '到期')): vipTypeNum == 4 ? (svipEndTime.split('-')[0] >= '9900' ? '长期有效' : (svipEndTime + '到期')) : '去查看'}}<img src="../../../../public/i/wap/memberIndex/rightArrow.png" alt="" class="c-ww40 c-pl10"></div>
      </div>
    </div>

    <div class="c-p" v-if="baseConf.styleType ==2">
      <div class="bgSize-cover" :class="isShowMember ? 'hh322' : 'c-hh206'">
        <div class="" :class="isShowMember ? 'hh322 templateFourImg' : 'c-hh206 white-gradient'">
          <div class="c-flex-row c-ph24 c-pv44">
            <div class="c-ww124 c-hh124 c-brp50 bd-ed" @click="clickAvatar">
              <img class="c-ww120 c-hh120 c-brp50" :src='userHeadImg ? userHeadImg : require("@/assets/defult_head.png")' />
            </div>
            <div class="c-pl28 c-pt8 c-w0 c-flex-grow1">
              <div class="c-flex-row c-aligni-center c-justify-sb">
                <div class="c-fw-b c-fs28 c-ww300 c-text-ellipsis1" :style="{color: baseConf.colorSet}">{{userName}}</div>
                <div class="c-ww110 c-hh48 c-flex-row c-flex-center c-fc-white theme-bg-gradient c-br24 c-fs20" @click="clickSign" v-if="showSignIn"><span class="iconfont c-pr8">&#xe70d;</span>签到</div>
                <div class="c-ww100 c-hh48 c-flex-row c-flex-center c-fc-white theme-bg-gradient c-br24 c-fs20" @click="iosLogoOut" v-if="isiOS || isAnApp">退出</div>
              </div>
              <div class="c-flex-row c-pt24 c-aligni-center">
                <identity-com v-if="!$isWxAppIos()" :vipType="vipTypeNum"></identity-com>
                <div class="c-fs24 c-fc-sblack c-ws-n c-pt4" :class="!$isWxAppIos() ? 'c-pl20' : ''" :style="{color: baseConf.colorSet}" v-if="!isiOS || (isiOS && !isYouke) || !isAnApp">
                  <span>ID:{{memberInfo.showId}}</span>
                  <span @click="copyId" class="iconfont c-fs32 c-pl6 c-vcAlign-top">&#xe805;</span>
                </div>
              </div>
            </div>
            <div class="c-pa p-l100 c-flex-row c-aligni-center c-justify-sb c-w80 c-pr24" @click="clickCenter(vipTypeNum)" :class="vipTypeNum == 1 ? 'p-b46' : 'p-b52'" v-if="isShowMember">
              <div class="c-fs26 c-fw-b fc-lyellow">{{vipTypeNum ==1 ? baseConf.guidMessage : vipTypeNum == 2 ? '专属VIP会员' :  vipTypeNum == 4 ? '专属SVIP会员' : '已有会员权限'}}</div>
              <div class="c-fs22 c-flex-row" :class="vipTypeNum ==1 ? 'c-ww120 c-hh48 c-lh48 c-br24 c-flex-center bg-lyellow c-fc-xblack c-fw-b' : 'c-aligni-center fc-lyellow'">
                <div>{{vipTypeNum ==1 ? '立即开通' : vipTypeNum==2 ? (vipEndTime.split('-')[0] >= '9900' ? '长期有效' : (vipEndTime + '到期')): vipTypeNum == 4 ? (svipEndTime.split('-')[0] >= '9900' ? '长期有效' : (svipEndTime + '到期')) : '去查看'}}<span class="iconfont c-pl6 c-fs20" v-if="vipTypeNum!=1">&#xe635;</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="c-p c-pt40" v-if="baseConf.styleType == 3">
      <div class="c-text-hidden" :class="isShowMember ? 'hh440': 'hh372 c-br16'">
        <div class="templateOne bgSize-cover" :style="{backgroundImage: `url(${baseConf.backgroundImage || 'https://kposshzcdn.ckjr001.com/admin/material/14_material_admin/image/assets/app/userInfo-bg.png'})`}"></div>
        <div class="oneWhite c-w100 c-pa" :class="isShowMember ? 'hh162': 'c-hh88'"></div>
      </div>
      <div class="c-w100 c-pa c-p-l0" :class="isShowMember ? 'hh480 oneBg c-p-t0': 'c-hh340 c-ph24 c-p-t40'">
        <div class="c-w100" :class="isShowMember ? 'c-pt80': 'c-ph24 c-bg-white c-br16 c-h c-pt40'">
          <div class="c-center c-ww144 c-hh144 c-brp50 bd-ed" @click="clickAvatar">
            <img class="c-ww140 c-hh140 c-brp50 c-inlineblack" :src='userHeadImg ? userHeadImg : require("@/assets/defult_head.png")' />
          </div>
          <div class="c-pt20 c-textAlign-c c-text-ellipsis1 c-fw-b c-fs28 c-lh" :style="{color: baseConf.colorSet}">{{userName}}</div>
          <div class="c-pt20 c-flex-row c-justify-center c-aligni-center">
            <identity-com v-if="!$isWxAppIos()" :vipType="vipTypeNum"></identity-com>
            <div class="c-pl12 c-fs24 c-fc-sblack c-pt4" :class="!$isWxAppIos() ? 'c-pl40' : ''" :style="{color: baseConf.colorSet}" v-if="!isiOS || (isiOS && !isYouke) || !isAnApp">
              <span>ID:{{memberInfo.showId}}</span>
              <span @click="copyId" class="iconfont c-fs32 c-pl10 c-vcAlign-top">&#xe805;</span>
            </div>
          </div>
        </div>
        <div class="c-pa p-r52 iconfont c-fs36 c-fc-sblack" :class="isShowMember ? 'c-p-t80' : 'c-p-t40'" @click="clickSign" v-if="showSignIn">&#xe8d5;</div>
        <div class="c-pa p-r52 c-ww100 c-hh48 c-flex-row c-flex-center c-fc-white theme-bg-gradient c-br24 c-fs22" :class="isShowMember ? 'c-p-t80' : 'c-p-t40'" @click="iosLogoOut" v-if="isiOS || isAnApp">退出</div>
        <div class="c-pa p-l100 c-flex-row c-aligni-center c-justify-sb c-w80 fc-lpink c-pr24" @click="clickCenter(vipTypeNum)" :class="vipTypeNum == 1 ? 'p-b46' : 'p-b48'" v-if="isShowMember">
          <div class="c-fs26 c-fw-b">{{vipTypeNum ==1 ? baseConf.guidMessage : vipTypeNum == 2 ? '专属VIP会员' :  vipTypeNum == 4 ? '专属SVIP会员' : '已有会员权限'}}</div>
          <div class="c-fs22 c-flex-row c-flex-center" :class="vipTypeNum ==1 ? 'c-ww120 c-hh48 c-flex-row c-flex-center openVip c-br24  fc-lpurple c-fw-b' : ''">
            <div class="c-fs22">{{vipTypeNum ==1 ? '去开通' : vipTypeNum==2 ? (vipEndTime.split('-')[0] >= '9900' ? '长期有效' : (vipEndTime + '到期')): vipTypeNum == 4 ? (svipEndTime.split('-')[0] >= '9900' ? '长期有效' : (svipEndTime + '到期')) : '去查看'}}<span :class="vipTypeNum ==1 ? '' : 'c-pl6'" class="iconfont c-fs20">&#xe635;</span></div>
          </div>
        </div>
      </div>
    </div>

    <div class="c-p c-text-hidden" v-if="baseConf.styleType ==4">
      <div class="bgSize-cover" :style="{backgroundImage: `url(${baseConf.backgroundImage || 'https://kposshzcdn.ckjr001.com/admin/material/14_material_admin/image/assets/app/userInfo-bg.png'})`}">
        <div class="c-pt24 c-ph30" :class="isShowMember ? 'hh322' : 'c-hh270'">
          <div class="c-pa c-p-t24 c-p-r24 c-ww100 c-hh40 c-fc-white c-translucent-balck50 c-br20" v-if="(isiOS || isAnApp) || showSignIn">
            <div class="c-w100 c-h c-opacity50 c-bd1-white c-br20"></div>
            <div @click="clickSign" class="c-flex-row c-flex-center c-h c-pa c-p-t0 c-p-l0 c-w100" v-if="showSignIn"><span class="iconfont c-pr8 c-fs18">&#xe70d;</span>签到</div>
            <div @click="iosLogoOut" class="c-flex-row c-flex-center c-h c-pa c-p-t0 c-p-l0 c-w100" v-if="isiOS || isAnApp">退出</div>
          </div>
          <div class="c-flex-row pt74 c-pb40">
            <div class="c-ww124 c-hh124 c-brp50 bd-ed" @click="clickAvatar">
              <img class="c-ww120 c-hh120 c-brp50" :src='userHeadImg ? userHeadImg : require("@/assets/defult_head.png")' />
            </div>
            <div class="c-pl28 c-pt8 c-w0 c-flex-grow1">
              <div class="c-flex-row c-aligni-center">
                <div class="c-fw-b c-fs28 c-text-ellipsis1" :style="{color: baseConf.colorSet}">{{countNameLength(userName)}}</div>
                <div class="c-pl12 c-fs24 c-pt4 c-ws-n" :style="{color: baseConf.colorSet}" v-if="!isiOS || (isiOS && !isYouke) || !isAnApp">
                  <span>(ID:{{memberInfo.showId}}</span><span @click="copyId" class="iconfont c-fs32 c-pl4 c-vcAlign-top">&#xe805;</span><span>)</span>
                </div>
              </div>
              <div class="c-flex-row c-pt24 c-aligni-center c-pa fourIdentity c-pz1000">
                <identity-com v-if="!$isWxAppIos()" :vipType="vipTypeNum"></identity-com>
              </div>
            </div>
          </div>
          <div class="c-pa c-p-bm4 p-r-10 rotate c-textAlign-l fourImg c-ww240 c-hh140" @click="clickCenter(vipTypeNum)" v-if="isShowMember">
            <div class="c-fs24 fc-lbrow c-fw-b fourTitle">{{vipTypeNum ==1 ? '开通VIP会员' : vipTypeNum == 2 ? '专属VIP会员' :  vipTypeNum == 4 ? '专属SVIP会员' : '已有会员权限'}}</div>
            <div class="fc-llbrow fourDescribe c-ml28 c-ww180 c-hh32 c-flex-row c-br16 c-ph10 c-aligni-center c-justify-sb mt8" :class="vipTypeNum ==2 || vipTypeNum ==4 ? 'c-fs16' : vipTypeNum ==1 ? 'c-fs14' : 'c-fs18'">
              <div class="c-ws-n">{{vipTypeNum ==1 ? baseConf.guidMessage : vipTypeNum==2 ? (vipEndTime.split('-')[0] >= '9900' ? '长期有效' : (vipEndTime + '到期')): vipTypeNum == 4 ? (svipEndTime.split('-')[0] >= '9900' ? '长期有效' : (svipEndTime + '到期')) : '去查看'}}</div>
              <div class="iconfont c-fs14 c-pl10">&#xe635;</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { memberIndexMixin } from "@/mixin/memberIndex.js";
import identityCom from "@/components/templates/common/identityCom.vue";
export default {
  name: "MemberBasic",
  components: {
    identityCom
  },
  mixins: [memberIndexMixin],
  props: {
    baseConf: {
      type: Object,
      default: {}
    },
    vipTypeNum: {
      type: Number,
      default: 10
    },
    memberInfo: {
      type: Object,
      default: {}
    },
    vipType: {
      type: String,
      default: '10'
    },
    isiOS: {
      type: Boolean,
      default: false
    },
    isYouke: {
      type: Boolean,
      default: false
    },
    isAnApp: {
      type: Boolean,
      default: false
    },
    vipEndTime: {
      type: String,
      default: ''
    },
    svipEndTime: {
      type: String,
      default: ''
    },
    enableIosRecharge: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      userName: localStorage.getItem("userName"),
      userHeadImg: localStorage.getItem("userHeadImg"),
    };
  },
  methods: {
  },
};
</script>

<style scoped>
.hh162 {
  height: 4.05rem;
}
.hh322 {
  height: 8.05rem;
}
.hh372 {
  height: 9.3rem;
}
.hh480 {
  height: 12rem;
}
.hh440 {
  height: 11rem;
}
.templateOne {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8.25rem;
  z-index: -1;
}
.oneWhite {
  background: url("../../../../public/i/wap/memberIndex/white.png") no-repeat;
  background-size: 100% 100%;
  top: 8.1rem;
}
.oneBg {
  background: url("../../../../public/i/wap/memberIndex/oneBg.png") no-repeat;
  background-size: 100% 100%;
}
.mt8 {margin-top: 0.2rem}
.mt26 {margin-top: 0.65rem}
.p-b22 {bottom: 0.55rem}
.p-b28 {bottom: 0.7rem}
.p-b46 {bottom: 1.15rem}
.p-b48 {bottom: 1.2rem}
.p-b44 {bottom: 1.1rem}
.p-b46 {bottom: 1.15rem}
.p-b50 {bottom: 1.25rem}
.p-b52 {bottom: 1.3rem}
.p-r-10 {right: -0.25rem;}
.p-r4 {right: 0.2rem}
.p-r16 {right: 0.4rem}
.p-r52 {right: 1.3rem;}
.p-l100 {left: 2.5rem;}
.fc-lpink {color: #FFE0D2}
.p-bm2 {bottom: -0.05rem}
.openVip {
  background: linear-gradient(270deg, #FBE6DC 0%, #E1AE9A 100%);
}
.bg-lyellow {
  background: linear-gradient(270deg, #FBF1DC 0%, #E1C99A 100%);
}
.fc-lpurple{
  color: #180E63
}
.fc-lyellow {
  color: #FFF0D4;
}
.templateBg {
  height: 8.05rem;
}
.bgSize-cover {
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
}
.fourDescribe {
  border: 1px solid #7C471F;
  margin-left: 0.8rem;
}
.templateTwoImg {
  background: url("../../../../public/i/wap/memberIndex/twoBg.png") no-repeat;
  background-size: 100% 100%;
  height: 8.05rem;
}
.templateThreeImg {
  background: url("../../../../public/i/wap/memberIndex/threeBg.png") no-repeat;
  background-size: 100% 100%;
}
.templateFourImg {
  background: url("../../../../public/i/wap/memberIndex/fourBg.png") no-repeat;
  background-size: 100% 100%;
}
.fourImg {
  background: url("../../../../public/i/wap/memberIndex/four.png") no-repeat;
  background-size: 100% 100%;
}
.fourIdentity {
  top: 3.6rem;
  left: 4.5rem;
}
.pl42 {
  padding-left: 1.05rem;
}
.fc-brown {
  color: #6F3D30;
}
.fc-lbrow {
  color:#7C471F;
}
.fc-llbrow {
  color: #7C471F;
}
.p-l160 {
  left: 4rem;
}
.pt74 {
  padding-top: 1.85rem;
}
.rotate {
  transform: rotate(7deg);
  -webkit-transform-origin: left;
  transform-origin: left;
}
.fourTitle {
  padding-left: 1.7rem;
  padding-top: 0.7rem;
}
.fourDes {
  border: 1px solid #7C471F;

}
.ml-20 {
  margin-left: -0.5rem;
}
.sign-btn {
  background: #5cabee;
  color: #fff;
  width: 100%;
  height: 1.3rem;
  line-height: 1.3rem;
  border-radius: 0.2rem;
  font-size: 0.6rem;
  text-align: center;
  box-shadow: 0px -0.1rem #4d96d4;
  cursor: pointer;
}
.bd-ed {border:1px solid #ededed;}
.white-gradient {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
}
.maxw280 {width: 7rem}
</style>